<!--该组件适用于纯文本 编辑 查看 删除 的表格-->
<template>
  <div>
    <div class="title">
      <span>
        {{tableTitle}}
      </span>
      <div class="btnGroup">
        <el-button type="primary" v-if="btnGroup.add" @click="add">新建</el-button>
        <el-button type="danger" v-if="btnGroup.choose" :disabled="chooseDelete" @click="removeAll">批量删除</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange">
      <el-table-column
        v-if="btnGroup.choose"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column  v-for="(item, index) in tableHead"
        :key="index"
        :prop="item.key"
        :label="item.value"
        :width="item.width">
        <template slot-scope="scope" >
            <img v-if="item.key === 'picture'" :src="imgBase + scope.row['picture']"  width="70" height="70" />
            <span v-if="item.key !=='picture' && item.key.indexOf('.') === -1">{{ scope.row[item.key] }}</span>
            <span v-if="item.key !=='picture' && item.key.indexOf('.') >= 0">{{ scope.row[item.key.split('.')[0]][item.key.split('.')[1]] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button v-if="btnGroup.message" @click="messageScope(scope.row)" type="success" plain size="small">查看</el-button>
          <el-button v-if="btnGroup.edit" @click="editScope(scope.row)" type="primary" plain size="small">编辑</el-button>
          <el-button v-if="btnGroup.deleted" @click="removeScope(scope.row)" type="danger" plain size="small">删除</el-button>
          <el-button v-if="btnGroup.open" @click="openScope(scope.row)" type="primary" plain size="small">开启</el-button>
          <el-button v-if="btnGroup.close" @click="closeScope(scope.row)" type="danger" plain size="small">关闭</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNo"
        :page-sizes="pageArray"
        :page-size="page.pageSize"
        layout="sizes, prev, pager, next"
        :total="page.pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as api from 'api/api.js'
export default {
  data () {
    return {
      pageArray: [10],
      chooseDelete: true,
      removeAllArray: [],
      imgBase: ''
    }
  },

  props: {
    // tableHead 数据 格式
    // [{
    //   key: 'date',
    //   value: '日期',
    //   width: '180'
    // }, {
    //     key: 'name',
    //     value: '姓名',
    //     width: '180'
    // }, {
    //     key: 'address',
    //     value: '地址',
    //     width: '180'
    // }]
    // 表格标题
    tableTitle: {
      type: String,
      default: function () {
        return {
          tableTitle: '表格标题'
        }
      }
    },

    tableHead: {
      type: Array,
      default: function () {
        return []
      }
    },

    imgList: {
      type: Array,
      default: function () {
        return [0]
      }
    },

    // table 数据 接口请求到的数据
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },

    // 按钮权限
    btnGroup: {
      type: Object,
      default: function () {
        return {
          add: true,
          deleted: true,
          edit: true,
          message: false,
          choose: false,
          open: false,
          close: false
        }
      }
    },

    // 页数
    page: {
      type: Object,
      default: function () {
        return {
          pageNo: 1,
          pageSize: 10,
          pageTotal: 10000
        }
      }
    }
  },

  methods: {
    //
    add (scope) {
      this.$emit('add', scope)
    },
    // 查看详情
    messageScope (scope) {
      this.$emit('messageScope', scope)
    },

    // 编辑
    editScope (scope) {
      this.$emit('editScope', scope)
    },

    // 删除
    removeScope (scope) {
      this.$confirm('确认删除该条信息？', '删除提醒', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        this.$emit('removeScope', scope)
      })
    },

    // 开启
    openScope (scope) {
      this.$emit('openScope', scope)
    },

    // 关闭
    closeScope (scope) {
      this.$confirm('确认关闭该条信息？', '关闭提醒', {
        distinguishCancelAndClose: true,
        confirmButtonText: '关闭',
        cancelButtonText: '取消'
      }).then(() => {
        this.$emit('closeScope', scope)
      })
    },

    // 每页条数
    handleSizeChange (val) {
      this.pageSize = val * 1
      this.$emit('handleSizeChange', val)
    },

    // 跳页
    handleCurrentChange (val) {
      this.pageNo = val * 1
      this.$emit('handleCurrentChange', val)
    },

    // 获取全部的多选值
    handleSelectionChange (val) {
      if (val.length > 0) {
        this.removeAllArray = val
        this.chooseDelete = false
      } else {
        this.chooseDelete = true
      }
    },

    // 批量删除
    removeAll () {
      let val = this.removeAllArray
      this.$confirm('确认删除这些信息？', '批量删除', {
        distinguishCancelAndClose: true,
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        this.toggleSelection()
        this.$emit('removeAll', val)
      })
    },

    // 取消所有选择
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    imgUploadimg () {
      this.imgBase = api.imgBase
      console.log(this.imgBase)
    }
  },

  mounted () {
    this.imgUploadimg()
  }
}
</script>
<style lang='scss' scoped type="text/css">
  .page {
    margin-top: 20px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      line-height: 32px;
    }
  }
</style>
